<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="chart">
        <title>Data Binding | Kendo UI Charts</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to handle the Kendo UI Charts data binding to inline data and to a data source.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/charts/data-binding.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/charts/data-binding.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="data-binding"><a href="#data-binding">Data Binding</a></h1>

<h2 id="to-inline-data"><a href="#to-inline-data">To Inline Data</a></h2>

<p>The Kendo UI Chart data points can be specified as part of the series definitions. The type of the data points depends on the type of the series.</p>

<h3 id="bind-to-arrays-of-values"><a href="#bind-to-arrays-of-values">Bind to Arrays of Values</a></h3>

<p>This is the simplest and the fastest form of data binding where the values are provided as an array for each series.</p>

<p>A limitation of this approach is that you are not allowed to add metadata to the data points. The array contains only the values which are to be plotted.</p>

<h4>Categorical Series</h4>

<p>Categorical series, such as the <a href="http://demos.telerik.com/kendo-ui/bar-charts/index">Bar</a>, the <a href="http://demos.telerik.com/kendo-ui/line-charts/index">Line</a>, the <a href="http://demos.telerik.com/kendo-ui/area-charts/index">Area</a> and other Kendo UI Charts, expect a data point of type <code>Number</code>. The category names are populated independently in the category axis.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>All series must contain the same number of points in an order identical to the category one.</p>
</blockquote>

<p>The example below demonstrates the inline binding of a column series.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: [200, 450, 300, 125, 100]
        }, {
            name: "Series 2",
            type: "column",
            data: [210, null, 200, 100, null]
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"]
        }
    });
    &lt;/script&gt;
</code></pre>

<h4>Scatter Series</h4>

<p>This category of Kendo UI Charts includes the two-dimensional <a href="http://demos.telerik.com/kendo-ui/scatter-charts/index">Scatter</a> and <a href="http://demos.telerik.com/kendo-ui/scatter-charts/scatter-line">Scatter Line</a> series. The data point has to be an array containing two values—X and Y, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#chart").kendoChart({
        series: [{
            name: "Example Series",
            type: "scatterLine",
            data:[[0, 0], [1, 1]]
        }]
    });
    &lt;/script&gt;
</code></pre>

<h3 id="bind-to-arrays-of-objects"><a href="#bind-to-arrays-of-objects">Bind to Arrays of Objects</a></h3>

<p>A more flexible and still very performant alternative is to provide the series with an array of objects. Configure the fields for each series, because they cannot be inferred as in the case with the simple arrays.</p>

<p>The major benefit of this approach is that you are able to associate metadata with the series points. It is also possible to combine the data for many series in a single object.</p>

<h4>Categorical Series</h4>

<p>In addition to binding to arrays, you are also able to supply objects and specify fields to bind the series to. This allows you to access additional fields, for example in tooltips.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    var seriesData = [
        { day: "Mon", sales1: 200, sales2: 210 },
        { day: "Tue", sales1: 450 },
        { day: "Wed", sales1: 300, sales2: 200 },
        { day: "Thu", sales1: 125, sales2: 100 },
        { day: "Fri", sales1: 100 }
    ];

    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: seriesData,
            field: "sales1"
        }, {
            name: "Series 2",
            type: "column",
            data: seriesData,
            field: "sales2"
        }],
        categoryAxis: {
            categoryField: "day"
        }
    });
    &lt;/script&gt;
</code></pre>

<h4>Scatter Series</h4>

<p>This category of Kendo UI Charts includes the two-dimensional <a href="http://demos.telerik.com/kendo-ui/scatter-charts/index">Scatter</a> and <a href="http://demos.telerik.com/kendo-ui/scatter-charts/scatter-line">Scatter Line</a> series. The data point has to be an array containing two values—X and Y, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#chart").kendoChart({
        series: [{
            name: "Example Series",
            type: "scatterLine",
            data:[[0, 0], [1, 1]]
        }]
    });
    &lt;/script&gt;
</code></pre>

<h2 id="bind-series-to-data-source"><a href="#bind-series-to-data-source">Bind Series to Data Source</a></h2>

<p>The most powerful form of data binding is to use the <a href="/framework/datasource/overview">Kendo UI DataSource component</a>. It supports binding to both local and remote data in a variety of formats and over different transport protocols. Examples include JSON, XML, JSONP and oData.</p>

<p>The usage of the DataSource abstraction incurs a performance overhead. For more information, refer to the article on <a href="/controls/charts/troubleshoot/performance-tips">performance tips</a>.</p>

<h3 id="set-the-data-source"><a href="#set-the-data-source">Set the Data Source</a></h3>

<p>The Chart accepts either a DataSource instance, or an object with the DataSource options.</p>

<p>The example below demonstrates how to set the DataSource configuration.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
        var seriesData = [
            { sales: 200 }, { sales: 450 },
            { sales: 300 }, { sales: 125 }
        ];

        $("#chart").kendoChart({
            dataSource:{
                data: seriesData
            },
            series: [{
                field: "sales"
            }]
        });
    &lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to set the DataSource instance.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
        var seriesData = [
            { sales: 200 }, { sales: 450 },
            { sales: 300 }, { sales: 125 }
        ];

        var ds = new kendo.data.DataSource({
             data: seriesData
        });

        $("#chart").kendoChart({
            dataSource: ds,
            series: [{
                field: "sales"
            }]
        });
    &lt;/script&gt;
</code></pre>

<h3 id="bind-to-remote-data"><a href="#bind-to-remote-data">Bind to Remote Data</a></h3>

<p>The Chart can be bound to remote data by configuring the DataSource <code>transport</code>. The transport defines the way the DataSource interacts with remote data.</p>

<p>The example below demonstrates how the following JSON string is returned from the <code>/sales</code> service.</p>

<h6>Example</h6>

<pre><code>[{ "year": "2000", "sales": 200 },
  { "year": "2001", "sales": 450 },
  { "year": "2002", "sales": 300 },
  { "year": "2003", "sales": 125 }]
</code></pre>

<p>Bind the data source to this service and sort it by year, as demonstrated below.</p>

<h6>Example</h6>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
    dataSource: {
        transport: {
            read: {
                url: "/sales",
                dataType: "json"
            }
        },
        sort: {
            field: "year",
            dir: "asc"
        }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="bind-to-grouped-data"><a href="#bind-to-grouped-data">Bind to Grouped Data</a></h3>

<p>The Chart can be bound to grouped data. In this case the categories are created depending on the first group.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>All series must contain the same number of points. If there is a different number of points in the <code>series.categoryField</code>,use groups instead of <code>categoryAxis.field</code>.</p>
</blockquote>

<p>The example below demonstrates a grouped chart with different number of points in the groups.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    var data =  [
          { "group": "Group 1", "value": 200, "category": "category 1" },
          { "group": "Group 2", "value": 400, "category": "category 1"  },
          { "group": "Group 3", "value": 500, "category": "category 1"  },
          { "group": "Group 1", "value": 300, "category": "category 2" },
          { "group": "Group 2", "value": 600, "category": "category 4" },
          { "group": "Group 3", "value": 500, "category": "category 2" },
          { "group": "Group 1", "value": 100, "category": "category 3" },
          { "group": "Group 3", "value": 200, "category": "category 4" }]

    $("#chart").kendoChart({
        dataSource: {
            data: data,
            group: {
                field: "group"
            },
            sort: {
                field: "category",
                dir: "asc"
            }
        },
        series: [{
            type: "column",
            field: "value",
            categoryField: "category"
        }]
    });
    &lt;/script&gt;
</code></pre>

<h3 id="bind-categorical-series"><a href="#bind-categorical-series">Bind Categorical Series</a></h3>

<h4>Value Field</h4>

<p>Categorical series, such as <a href="http://demos.telerik.com/kendo-ui/bar-charts/index">Bar</a>, <a href="http://demos.telerik.com/kendo-ui/line-charts/index">Line</a>, <a href="http://demos.telerik.com/kendo-ui/area-charts/index">Area</a> Kendo UI Charts, are bound to a value field. The category names are populated independently by binding the category axis.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>All series must contain the same number of points in an order identical to the category one.</p>
</blockquote>

<p>The example below demonstrates data-bound categorical series.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    var seriesData = [{
        year: "2000",
        sold: 100,
        produced: 200
    }, {
        year: "2001",
        sold: 250,
        produced: 280
    }];

    $("#chart").kendoChart({
        dataSource: {
            data: seriesData
        },
        series: [{
            name: "Sold",
            field: "sold"
        }, {
            name: "Produced",
            field: "produced"
        }],
        categoryAxis: {
            field: "year"
        }
    });
    &lt;/script&gt;
</code></pre>

<h4>Category Field</h4>

<p>In addition to value fields, each series allows for specifying a category field. The category values from all series are concatenated and each point is mapped to its category. Point order is not significant. Series points are <a href="/api/dataviz/chart#configuration-series.aggregate">aggregated</a> to produce one value per category.</p>

<p>The example below demonstrates how to bind with <code>categoryField</code>.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    var seriesData = [{
        year: "2000",
        sold: 100,
        product: "A"
    }, {
        year: "2001",
        sold: 150,
        product: "A"
    }, {
        year: "2000",
        sold: 200,
        product: "B"
    }];

    $("#chart").kendoChart({
        title: {
            text: "Sales summary"
        },
        dataSource: {
            data: seriesData
        },
        series: [{
            field: "sold",
            categoryField: "year",
            aggregate: "sum"
        }]
    });
    &lt;/script&gt;
</code></pre>

<h3 id="bind-scatter-series"><a href="#bind-scatter-series">Bind Scatter Series</a></h3>

<p>Scatter series are bound to the fields specified as <code>xField</code> and <code>yField</code>, as demonstrated below.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;script&gt;
    var xyData = [{
        x: 10, y: 20,
    }, {
        x: 100, y: 200
    } ];

    $("#chart").kendoChart({
        dataSource: {
            data: xyData
        },
        series: [{
            type: "scatter",
            xField: "x",
            yField: "y"
        }]
    });
    &lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on Kendo UI Charts:</p>

<ul>
<li><a href="/controls/charts/overview">Overview of the Chart Widgets</a></li>
<li><a href="/controls/charts/date-series">Date Series</a></li>
<li><a href="/controls/charts/features/tooltip">Tooltip</a></li>
<li><a href="/controls/charts/features/notes">Chart Notes</a></li>
<li><a href="/controls/charts/features/title-legend">Title and Legend</a></li>
<li><a href="/controls/charts/appearance">Appearance</a></li>
<li><a href="/controls/charts/features/error-bars">Error Bars</a></li>
<li><a href="/controls/charts/series">Data Series</a></li>
<li><a href="/controls/charts/chart-types/area-charts">Types of Kendo UI Charts</a></li>
<li><a href="/api/javascript/dataviz/ui/chart">Chart JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

